import { memo, useState } from "react";

import {FilterWrapper}  from './style';
import filterData  from '@/asset/data/filterdata.json'
import classNames from "classnames";

export const Filter = memo(
    (props) => {
       
        const [selectData, setSelectData] = useState([]);
        let tempData = [];
        const itemClick = (selectItem) => {
            tempData = [...selectData];
            if (tempData.includes(selectItem))
            {
                let index = tempData.findIndex(item => {
                    return selectItem === item
                });
                tempData.splice(index, 1);
            }
            else
            {
                 tempData.push(selectItem)
            }
              setSelectData([...tempData]);
        }
        return (
             
            <FilterWrapper>
                {filterData.map((item, index) => {
                    return (
                        <div className={classNames('item',{'active':selectData.includes(item)})} key={item} onClick={()=>itemClick(item)}>
                            {item}
                       </div>
                   )
               })}
            </FilterWrapper>
        )
    }
)